{% load static %}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>收银台首页 - 现代智能收银系统</title>
    <!-- 引入Bootstrap CSS（本地静态文件） -->
    <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
    <!-- 引入Font Awesome（CDN） -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- 引入自定义CSS -->
    <link rel="stylesheet" href="{% static 'css/cashier.css' %}">
    <!-- 自定义CSS -->
    <style>
        body {
            background-color: #f8f9fa;
            min-height: 100vh;
        }
        .header {
            background-color: #343a40;
            color: white;
            padding: 1rem 0;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .header h1 {
            margin: 0;
            font-size: 1.75rem;
        }
        .content-container {
            padding-top: 2rem;
            padding-bottom: 2rem;
        }
        .card-shadow {
            box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
            transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
        }
        .card-shadow:hover {
            transform: translateY(-3px);
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
        }
        .btn-primary {
            background-color: #007bff;
            border-color: #007bff;
        }
        .btn-primary:hover {
            background-color: #0056b3;
            border-color: #0056b3;
        }
        .btn-danger {
            background-color: #dc3545;
            border-color: #dc3545;
        }
        .btn-danger:hover {
            background-color: #c82333;
            border-color: #bd2130;
        }
        .btn-secondary {
            background-color: #6c757d;
            border-color: #6c757d;
        }
        .btn-secondary:hover {
            background-color: #545b62;
            border-color: #4e555b;
        }
        .footer {
            background-color: #343a40;
            color: white;
            padding: 1rem 0;
            text-align: center;
            position: fixed;
            bottom: 0;
            width: 100%;
        }
        .scan-area {
            border: 2px dashed #ccc;
            border-radius: 10px;
            padding: 2rem;
            text-align: center;
            background-color: #fafafa;
        }
        .scan-animation {
            height: 3px;
            background: linear-gradient(90deg, transparent, #007bff, transparent);
            animation: scan 2s infinite;
            margin: 1rem auto;
            width: 80%;
        }
        @keyframes scan {
            0% { transform: translateY(0); }
            50% { transform: translateY(100px); }
            100% { transform: translateY(0); }
        }
        .receipt-preview {
            background-color: white;
            border: 1px solid #dee2e6;
            border-radius: 5px;
            padding: 1rem;
            height: 300px;
            overflow-y: auto;
            font-family: 'Courier New', Courier, monospace;
            font-size: 0.9rem;
        }
    </style>
</head>
<body>
    <!-- 头部导航 -->
    <div class="header">
        <div class="container">
            <div class="row justify-content-between align-items-center">
                <div class="col-md-6">
                    <h1><i class="fa fa-shopping-cart"></i> 现代智能收银系统</h1>
                </div>
                <div class="col-md-6 text-right">
                    <div class="dropdown">
                        <button class="btn btn-secondary dropdown-toggle" type="button" id="cashierMenu" data-bs-toggle="dropdown" aria-expanded="false">
                            <i class="fa fa-user-circle"></i> 收银员
                        </button>
                        <ul class="dropdown-menu" aria-labelledby="cashierMenu">
                            <li><a class="dropdown-item" href="{% url 'cashier_settings' %}"><i class="fa fa-cog"></i> 收银台设置</a></li>
                            <li><a class="dropdown-item" href="#"><i class="fa fa-question-circle"></i> 帮助</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item text-danger" href="#"><i class="fa fa-sign-out"></i> 退出登录</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 主要内容区 -->
    <div class="content-container">
        <div class="container">
            <!-- 快捷功能区 -->
            <div class="row mb-4">
                <div class="col-md-4 mb-3">
                    <div class="card card-shadow">
                        <div class="card-body text-center">
                            <i class="fa fa-barcode fa-3x text-primary mb-2"></i>
                            <h5 class="card-title">扫码结算</h5>
                            <p class="card-text text-muted">扫描商品条码快速结算</p>
                            <button class="btn btn-primary" id="startScanBtn"><i class="fa fa-play"></i> 开始扫描</button>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 mb-3">
                    <div class="card card-shadow">
                        <div class="card-body text-center">
                            <i class="fa fa-search fa-3x text-primary mb-2"></i>
                            <h5 class="card-title">商品查询</h5>
                            <p class="card-text text-muted">搜索和查询商品信息</p>
                            <button class="btn btn-primary" id="searchProductBtn"><i class="fa fa-search"></i> 搜索商品</button>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 mb-3">
                    <div class="card card-shadow">
                        <div class="card-body text-center">
                            <i class="fa fa-file-text-o fa-3x text-primary mb-2"></i>
                            <h5 class="card-title">交易记录</h5>
                            <p class="card-text text-muted">查看今日交易明细</p>
                            <button class="btn btn-primary" id="transactionHistoryBtn"><i class="fa fa-history"></i> 查看记录</button>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 扫码区域和收据预览 -->
            <div class="row">
                <!-- 扫码区域 -->
                <div class="col-md-6 mb-4">
                    <div class="card card-shadow">
                        <div class="card-header bg-primary text-white">
                            <h4 class="card-title mb-0"><i class="fa fa-qrcode"></i> 扫码结算区域</h4>
                        </div>
                        <div class="card-body">
                            <div class="scan-area" id="scanArea">
                                <i class="fa fa-barcode fa-5x text-muted mb-3"></i>
                                <p class="text-muted mb-2">请将商品条码对准扫码器</p>
                                <div class="scan-animation"></div>
                                <p class="text-sm text-muted">或手动输入条码：</p>
                                <div class="input-group mt-2">
                                    <input type="text" class="form-control" id="barcodeInput" placeholder="输入商品条码">
                                    <button class="btn btn-primary" id="addItemBtn">添加</button>
                                </div>
                            </div>
                            
                            <!-- 已选商品列表 -->
                            <div class="mt-4">
                                <h5 class="text-muted"><i class="fa fa-list"></i> 已选商品</h5>
                                <div class="table-responsive">
                                    <table class="table table-sm">
                                        <thead>
                                            <tr>
                                                <th>商品</th>
                                                <th class="text-right">单价</th>
                                                <th class="text-center">数量</th>
                                                <th class="text-right">小计</th>
                                                <th class="text-center">操作</th>
                                            </tr>
                                        </thead>
                                        <tbody id="cartItems">
                                            <!-- 动态商品列表将在这里显示 -->
                                            <tr>
                                                <td colspan="5" class="text-center text-muted">暂无商品，请扫描或添加商品</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 收据预览和结算 -->
                <div class="col-md-6 mb-4">
                    <div class="card card-shadow">
                        <div class="card-header bg-primary text-white">
                            <h4 class="card-title mb-0"><i class="fa fa-file-text"></i> 收据预览</h4>
                        </div>
                        <div class="card-body">
                            <div class="receipt-preview" id="receiptPreview">
                                <div class="text-center mb-2">
                                    <h4>现代智能收银系统</h4>
                                    <p>收银小票</p>
                                    <p class="text-xs">2023-10-25 15:30:45</p>
                                </div>
                                <hr class="my-1">
                                <div class="receipt-items">
                                    <!-- 商品明细将在这里显示 -->
                                    <p class="text-center text-muted text-sm">暂无商品明细</p>
                                </div>
                                <hr class="my-1">
                                <div class="receipt-summary">
                                    <p class="d-flex justify-content-between"><span>商品数量:</span> <span>0</span></p>
                                    <p class="d-flex justify-content-between"><span>商品总价:</span> <span>¥0.00</span></p>
                                    <p class="d-flex justify-content-between"><span>优惠折扣:</span> <span>¥0.00</span></p>
                                    <p class="d-flex justify-content-between font-weight-bold"><span>实付金额:</span> <span>¥0.00</span></p>
                                </div>
                                <hr class="my-1">
                                <div class="text-center text-xs mt-2">
                                    <p>感谢您的光临！</p>
                                    <p>小票号: 20231025153045001</p>
                                    <p>收银员: 张三</p>
                                </div>
                            </div>
                            
                            <!-- 结算操作 -->
                            <div class="mt-4">
                                <div class="d-flex justify-content-between mb-3">
                                    <span class="text-muted">总计:</span>
                                    <span class="font-weight-bold text-xl">¥0.00</span>
                                </div>
                                <div class="mb-3">
                                    <label for="paymentMethod" class="form-label">支付方式</label>
                                    <select class="form-select" id="paymentMethod">
                                        <option value="cash">现金</option>
                                        <option value="alipay">支付宝</option>
                                        <option value="wechat">微信支付</option>
                                        <option value="card">银行卡</option>
                                    </select>
                                </div>
                                <div class="d-grid gap-2">
                                    <button class="btn btn-primary btn-lg" id="checkoutBtn" disabled>
                                        <i class="fa fa-credit-card"></i> 结算
                                    </button>
                                    <button class="btn btn-danger" id="clearCartBtn">
                                        <i class="fa fa-trash-o"></i> 清空购物车
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 页脚 -->
    <div class="footer">
        <div class="container">
            <p>&copy; 2023 现代智能收银系统 - 版本 1.0.0</p>
        </div>
    </div>
    
    <!-- 引入Bootstrap JS -->
    <script src="{% static 'js/bootstrap.bundle.min.js' %}"></script>
    <!-- 收银台交互逻辑 -->
    <script src="{% static 'js/cashier.js' %}"></script>
    <!-- 自定义脚本 -->
    <script>
        // 等待页面加载完成
        document.addEventListener('DOMContentLoaded', function() {
            // 模拟数据 - 实际应用中会从服务器获取
            const mockProducts = {
                '1001': { name: '可口可乐 330ml', price: 3.5, unit: '瓶' },
                '1002': { name: '康师傅红烧牛肉面', price: 4.5, unit: '桶' },
                '1003': { name: '农夫山泉 550ml', price: 2.0, unit: '瓶' },
                '1004': { name: '乐事薯片 原味 70g', price: 6.5, unit: '袋' },
                '1005': { name: '德芙巧克力 42g', price: 12.0, unit: '块' }
            };
            
            // 购物车数据
            let cart = [];
            
            // 更新购物车显示
            function updateCartDisplay() {
                const cartItems = document.getElementById('cartItems');
                const receiptItems = document.querySelector('.receipt-items');
                const totalPriceElement = document.querySelector('.text-xl.font-weight-bold');
                const checkoutBtn = document.getElementById('checkoutBtn');
                
                // 清空现有内容
                cartItems.innerHTML = '';
                receiptItems.innerHTML = '';
                
                // 更新购物车
                if (cart.length === 0) {
                    cartItems.innerHTML = '<tr><td colspan="5" class="text-center text-muted">暂无商品，请扫描或添加商品</td></tr>';
                    receiptItems.innerHTML = '<p class="text-center text-muted text-sm">暂无商品明细</p>';
                    totalPriceElement.textContent = '¥0.00';
                    checkoutBtn.disabled = true;
                    return;
                }
                
                // 计算总价
                let totalPrice = 0;
                
                // 添加商品到表格
                cart.forEach((item, index) => {
                    const subtotal = item.price * item.quantity;
                    totalPrice += subtotal;
                    
                    // 购物车表格行
                    const row = document.createElement('tr');
                    row.innerHTML = `
                        <td>${item.name}</td>
                        <td class="text-right">¥${item.price.toFixed(2)}</td>
                        <td class="text-center">
                            <button class="btn btn-sm btn-secondary decrease-qty" data-index="${index}">-</button>
                            <span class="mx-2">${item.quantity}</span>
                            <button class="btn btn-sm btn-secondary increase-qty" data-index="${index}">+</button>
                        </td>
                        <td class="text-right">¥${subtotal.toFixed(2)}</td>
                        <td class="text-center">
                            <button class="btn btn-sm btn-danger remove-item" data-index="${index}">删除</button>
                        </td>
                    `;
                    cartItems.appendChild(row);
                    
                    // 收据预览商品行
                    const receiptItem = document.createElement('p');
                    receiptItem.className = 'd-flex justify-content-between';
                    receiptItem.innerHTML = `
                        <span>${item.name}</span>
                        <span>¥${subtotal.toFixed(2)}</span>
                    `;
                    receiptItems.appendChild(receiptItem);
                });
                
                // 更新总价
                totalPriceElement.textContent = `¥${totalPrice.toFixed(2)}`;
                
                // 更新收据中的金额
                document.querySelector('.receipt-summary p:nth-child(2) span:last-child').textContent = `¥${totalPrice.toFixed(2)}`;
                document.querySelector('.receipt-summary p:nth-child(4) span:last-child').textContent = `¥${totalPrice.toFixed(2)}`;
                
                // 启用结算按钮
                checkoutBtn.disabled = false;
                
                // 添加事件监听器
                addCartEventListeners();
            }
            
            // 添加购物车相关事件监听器
            function addCartEventListeners() {
                // 减少数量按钮
                document.querySelectorAll('.decrease-qty').forEach(btn => {
                    btn.addEventListener('click', function() {
                        const index = parseInt(this.getAttribute('data-index'));
                        if (cart[index].quantity > 1) {
                            cart[index].quantity--;
                        } else {
                            cart.splice(index, 1);
                        }
                        updateCartDisplay();
                    });
                });
                
                // 增加数量按钮
                document.querySelectorAll('.increase-qty').forEach(btn => {
                    btn.addEventListener('click', function() {
                        const index = parseInt(this.getAttribute('data-index'));
                        cart[index].quantity++;
                        updateCartDisplay();
                    });
                });
                
                // 删除商品按钮
                document.querySelectorAll('.remove-item').forEach(btn => {
                    btn.addEventListener('click', function() {
                        const index = parseInt(this.getAttribute('data-index'));
                        cart.splice(index, 1);
                        updateCartDisplay();
                    });
                });
            }
            
            // 添加商品
            function addItem(barcode) {
                const product = mockProducts[barcode];
                if (!product) {
                    alert('未找到该商品，请检查条码是否正确');
                    return;
                }
                
                // 检查商品是否已在购物车中
                const existingItemIndex = cart.findIndex(item => item.barcode === barcode);
                if (existingItemIndex >= 0) {
                    // 增加数量
                    cart[existingItemIndex].quantity++;
                } else {
                    // 添加新商品
                    cart.push({
                        barcode: barcode,
                        name: product.name,
                        price: product.price,
                        quantity: 1
                    });
                }
                
                updateCartDisplay();
            }
            
            // 手动添加商品
            document.getElementById('addItemBtn').addEventListener('click', function() {
                const barcode = document.getElementById('barcodeInput').value.trim();
                if (barcode) {
                    addItem(barcode);
                    document.getElementById('barcodeInput').value = '';
                }
            });
            
            // 按下回车键添加商品
            document.getElementById('barcodeInput').addEventListener('keypress', function(e) {
                if (e.key === 'Enter') {
                    document.getElementById('addItemBtn').click();
                }
            });
            
            // 清空购物车
            document.getElementById('clearCartBtn').addEventListener('click', function() {
                if (cart.length > 0 && confirm('确定要清空购物车吗？')) {
                    cart = [];
                    updateCartDisplay();
                }
            });
            
            // 结算
            document.getElementById('checkoutBtn').addEventListener('click', function() {
                if (cart.length === 0) {
                    alert('购物车为空，无法结算');
                    return;
                }
                
                const paymentMethod = document.getElementById('paymentMethod').value;
                alert(`结算成功！\n支付方式：${paymentMethod}\n商品数量：${cart.length}\n请等待打印小票...`);
                
                // 清空购物车
                cart = [];
                updateCartDisplay();
            });
            
            // 扫码按钮
            document.getElementById('startScanBtn').addEventListener('click', function() {
                alert('扫码功能已启动，请开始扫描商品条码');
                document.getElementById('barcodeInput').focus();
            });
            
            // 搜索商品按钮
            document.getElementById('searchProductBtn').addEventListener('click', function() {
                const searchTerm = prompt('请输入商品名称或条码：');
                if (searchTerm) {
                    // 模拟搜索结果
                    alert('商品搜索功能将在实际应用中实现');
                }
            });
            
            // 交易记录按钮
            document.getElementById('transactionHistoryBtn').addEventListener('click', function() {
                alert('交易记录功能将在实际应用中实现');
            });
            
            // 初始化购物车显示
            updateCartDisplay();
        });
    </script>
</body>
</html>